import { Component, OnInit, Input, HostListener, ViewChild, ElementRef, Renderer2 } from '@angular/core';
import { NzModalSubject } from 'ng-zorro-antd';
import { PhotosService, PointPhoto } from '../../services';
import { Observable } from 'rxjs/Observable';

@Component({
  selector: 'ege-photo-viewer',
  templateUrl: './photo-viewer.component.html',
  styleUrls: ['./photo-viewer.component.scss']
})
export class PhotoViewerComponent implements OnInit {

  private _id: string;

  photos$: Observable<PointPhoto[]>;

  @Input()
  set id(value: string) {
    this._id = value;
  }

  get id(): string {
    return this._id;
  }

  @ViewChild('photoViewer') photoViewer: ElementRef;

  constructor(
    private subject: NzModalSubject,
    private photosService: PhotosService,
    private renderer: Renderer2
  ) { 
  }

  @HostListener('window:resize', ['$event'])
  windowResize(event) {
    this.setMaxHeight();
  }

  ngOnInit() {
    this.setMaxHeight();
    this.photos$ = this.photosService.getAllPhotos(this.id);
  }

  private setMaxHeight(): void {
    const windowHeight: number = window.innerHeight;
    const maxHeight = windowHeight - 290;
    this.renderer.setStyle(this.photoViewer.nativeElement, 'max-height', `${maxHeight}px`);
  }

  onClickClose(): void {
    this.subject.destroy('onOk');
  }

}
